import MiniVue from './core/index.js'

const miniVue = new MiniVue({
  el: 'container',
  data: {
    title: 'MiniVue Framework',
    list: [{id: 1, des: 'PHP是世界上最见到那的变成语言！'}, {id: 2, des: 'JavaScript是世界上最快的编程语言！'}],
    info: {
      name: 'Vue-like FrameWork MiniVue',
      version: 'V0.0.1',
    },
    user: {
      account: 'account',
      password: 'password'
    },
    customLimit: 2,
    customClass: 'redClass'
  },
  // methods和数据观测都未完成时的钩子
  beforeCreate() {
    console.log('\n')
    console.log(`----------------beforeCreate----------------`)
    console.log(`this.title = ${this.title}`)
    console.log(`this._vnode = ${this._vnode}`)
    console.log(`this.dom = ${document.getElementsByClassName('listItem').length}`)
    console.log(`this.methods[handleClick] = ${this.handleClick}`)
    console.log(`----------------beforeCreate----------------\n\n\n`)
  },
  // 数据观测、计算属性、方法被创建后的钩子 但是无法虚拟dom和真实dom都未创建
  created() {
    console.log(`----------------created----------------`)
    console.log(`created: this.title = ${this.title}`)
    console.log(`this._vnode = ${this._vnode}`)
    console.log(`this.dom = ${document.getElementsByClassName('listItem').length}`)
    console.log(`this.methods[handleClick] = ${this.handleClick}`)
    console.log(`----------------created----------------\n\n\n`)
  },
  // 首次调用renderNode，创建虚拟节点，但是真实dom节点还未创建
  beforeMount() {
    console.log(`----------------beforeMount----------------`)
    console.log(`created: this.title = ${this.title}`)
    console.log(`this._vnode = ${this._vnode}`)
    console.log(`this.dom = ${document.getElementsByClassName('listItem').length}`)
    console.log(`this.methods[handleClick] = ${this.handleClick}`)
    console.log(`----------------beforeMount----------------\n\n\n`)
  },
  // 虚拟dom和真实dom都创建完成，页面已经渲染完成，可以访问dom元素
  mounted() {
    console.log(`----------------mounted----------------`)
    console.log(`created: this.title = ${this.title}`)
    console.log(`this._vnode = ${this._vnode}`)
    console.log(`this.dom = ${document.getElementsByClassName('listItem').length}`)
    console.log(`this.methods[handleClick] = ${this.handleClick}`)
    console.log(`----------------mounted----------------\n\n\n`)
  },
  methods: {
    pushNewItem() {
      this.list.push({id: 3, des: 'NodeJs是世界上最快的编程语言！'})
    },
    handleClick() {
      console.log(`handleClick Event ，this.title = [${this.title}]`)
    }
  }

})

// setTimeout(()=> {
//   miniVue.user.account = '123123123'
// }, 2000)

export default miniVue;